<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@import url(https://fonts.googleapis.com/css?family=Lato);
			body {
			  display: flex;
			  height: 100vh;
			  justify-content: center;
			  align-items: center;
			  background: #ECEFFC;
			}
			
			.login {
			  position: relative;
			  width: 10em;
			  height: 4em;
			  color: #eee;
			  font-family: Lato, sans-serif;
			  font-size: 1.5em;
			  text-align: center;
			  text-transform: uppercase;
			  background: #1F1E1E;
			  border: none;
			  border-radius: 4em;
			  outline: none;
			  box-shadow: 0 1.4px 2.8px rgba(0, 0, 0, 0.141), 0 3.3px 6.7px rgba(0, 0, 0, 0.202), 0 6.3px 12.5px rgba(0, 0, 0, 0.25), 0 11.2px 22.3px rgba(0, 0, 0, 0.298), 0 20.9px 41.8px rgba(0, 0, 0, 0.359), 0 50px 100px rgba(0, 0, 0, 0.5);
			  cursor: pointer;
			  transition: all 0.5s;
			}
			.login .loader {
			  position: absolute;
			  top: 1.3em;
			  right: 0.5em;
			  width: 3em;
			  height: 0.5em;
			  opacity: 0;
			  transition: opacity 0.3s 0.3s;
			}
			.login .loader .line-scale-pulse-out-rapid div {
			  display: inline-flex;
			  width: 4px;
			  height: 35px;
			  margin: 2px;
			  border-radius: 2px;
			  background-color: white;
			  animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);
			}
			.login .loader .line-scale-pulse-out-rapid div:nth-child(2), .login .loader .line-scale-pulse-out-rapid div:nth-child(4) {
			  animation-delay: -0.25s;
			}
			.login .loader .line-scale-pulse-out-rapid div:nth-child(1), .login .loader .line-scale-pulse-out-rapid div:nth-child(5) {
			  animation-delay: 0s;
			}
			.login .tick {
			  position: absolute;
			  left: 1.5em;
			  bottom: 1.2em;
			  opacity: 0;
			  stroke: #eee;
			  stroke-width: 5px;
			  stroke-dasharray: 36px;
			  stroke-dashoffset: 36px;
			  transition: opacity 0.3s;
			}
			.login.loading {
			  width: 4em;
			  color: transparent;
			  pointer-events: none;
			  user-select: none;
			}
			.login.loading .loader {
			  opacity: 1;
			}
			.login.success .loader {
			  opacity: 0;
			}
			.login.success .tick {
			  opacity: 1;
			  animation: show-tick 0.8s 0.4s forwards;
			}
			
			@keyframes line-scale-pulse-out-rapid {
			  from, 90% {
			    transform: scaleY(1);
			  }
			  80% {
			    transform: scaleY(0.3);
			  }
			}
			@keyframes show-tick {
			  to {
			    stroke-dashoffset: 0;
			  }
			}
		</style>
	</head>
	<body>
		<button class="login">
		  <span>login</span>
		  <div class="loader">
		    <div class="line-scale-pulse-out-rapid">
		      <div></div>
		      <div></div>
		      <div></div>
		      <div></div>
		      <div></div>
		    </div>
		  </div>
		  <svg class="tick" width="30px" height="30px" stroke="white" fill="none">
		    <polyline points="2,10 12,18, 28,2"></polyline>
		  </svg>
		</button>
	</body>
</html>
<script>
	"use strict";
	let sleep = (time) => new Promise(resolve => setTimeout(resolve, time));
	let btn = document.querySelector(".login");
	btn.addEventListener("click", async () => {
	    btn.classList.add("loading");
	    await sleep(3000);
	    btn.classList.add("success");
	});

</script>